第 1 步 - 平移地图

使用平移操纵器可以使用户在 Kanzi 应用程序中移动节点。平移操纵器是一种输入操纵器，您可以用于在 Kanzi 应用程序中添加手势识别到节点上。平移手势跟踪在设备屏幕上移动的指针位置，以计算移动节点的量。

在教程的这一步中，使用平移操纵器移动地图。

教程资产

本教程的起点资料存储在 <KanziWorkspace>/Tutorials/Pan zoom tap/Start 目录中。

<KanziWorkspace>/Tutorials/Pan zoom tap/Completed 目录包含本教程已完成的工程。

起点工程包含完成本教程所需的内容：

Map 节点包含地图图像。
Map 节点分配到其父节点的中心，并且 Map 节点的渲染变换原点 (Render Transformation Origin) 属性被设置为 Map 节点的中心。旋转节点时，节点绕其原点旋转。

屏幕 (Screen) 节点的资源字典包含指向 Map 节点的别名。
此别名为访问使用 Kanzi Engine API 的 Map 节点提供了便捷方式。

Pin 预设件包含别针图标的图像。
渲染变换原点 (Render Transformation Origin) 属性已设置，使得旋转别针图标时，别针绕其尖端旋转。

平移地图

这一节中，您创建平移操纵器，并在用户将指针放到地图上并移动指针时使用平移操纵器移动地图。

要平移地图：

在 Kanzi Studio 打开存储在 <KanziWorkspace>/Tutorials/Pan zoom tap/Start/Tool_project 中的工程。

在工程 (Project) 中选择 RootPage > Map 节点，在属性 (Properties) 中添加可测试命中 (Hit Testable) 属性并启用。
当您启用属性时，用户能选取节点。

选择 > 导出 (Export) > 导出 KZB (Export KZB)。
Kanzi Studio 从 Kanzi Studio 工程创建 kzb 文件和配置文件。Kanzi Studio 将导出的文件存储在 <ProjectName>/Application/bin 目录或您在 > 的二进制导出目录 (Binary Export Directory) 属性中指定的位置。Kzb 文件包含 Kanzi Studio 工程中的所有节点和资源，您在本地化表中标记为本地化包的资源除外。
当您从 Visual Studio 中运行您的 Kanzi 应用程序时，您的应用程序就会加载 kzb 文件和配置文件。

在 Visual Studio 中，打开存储在 Pan zoom tap/Start/Application/configs/platforms/win32 中的Pan_zoom_tap.sln 解决方案。

注

如果您在 Visual Studio 2017 中打开教程解决方案，遇到提示您重新定位工程到最新的 Microsoft 工具集时，请点击取消 (Cancel)。

建议

要从 Kanzi Studio 打开 Kanzi Studio 工程的目录，选择文件 (File) > 在 Windows 资源管理器中打开 (Open in Windows Explorer)。

在 Visual Studio 中打开 pan_zoom_tap.cpp 文件，在 PanZoomTap 类的公有部分定义 PanManipulator::MovedMessage 消息的处理程序：

private: 

    // 为 PanManipulator::MovedMessage 消息定义处理程序，该消息来自
    //具有可生成平移消息的输入操纵器的 2D 节点。
    //此处理程序为平移手势的量变换 2D 节点。
    void onPanMoved(PanManipulator::MovedMessageArguments& messageArguments)
    {
        //从消息参数获得用户平移的节点。
        Node2DSharedPtr mapNode = dynamic_pointer_cast<Node2D>(messageArguments.getSource());

        //获取自平移手势队列中最后一条消息起
        //平移的像素距离。
        Vector2 translationDelta = messageArguments.getDelta();

        //获取 Map 节点的 渲染变换 (Render Transformation) 属性。
        SRTValue2D mapNodeSRT = mapNode->getRenderTransformation();

        //获取 Map 节点的当前变换。
        Vector2 translation = mapNodeSRT.getTranslation();

        //从平移消息应用变换。
        Vector2 translationTarget = translation - translationDelta;

        //获取 Map 节点的父节点。
        Node2D* containerNode = dynamic_cast<Node2D*>(mapNode->getParent());

        //获取父节点的大小。
        Vector2 containerSize = containerNode->getActualSize();

        //获取 Map 节点的 渲染变换 (Render Transformation) 属性 缩放 (Scale) 属性字段。
        Vector2 mapScale = mapNodeSRT.getScale();

        //计算 Map 节点的缩放大小。
        Vector2 mapSizeScaled = componentWiseMultiply(mapNode->getActualSize(), mapScale);

        //不要超出 Map 节点的边界平移。
        //计算边界时，考虑当前地图比例。
        if (mapScale.getX() >= 1.0f) 
        {
            translationTarget = componentWiseMax(componentWiseMin(translationTarget, (mapSizeScaled - containerSize) / 2), (containerSize - mapSizeScaled) / 2);
        }
        else if (mapScale.getX() < 1.0f)
        {
            translationTarget = componentWiseMin(componentWiseMax(translationTarget, (containerSize - mapSizeScaled) / 2), (mapSizeScaled - containerSize) / 2);
        }

        //设置新变换。
        mapNodeSRT.setTranslation(translationTarget);

        //应用新变换到 Map 节点。
        mapNode->setRenderTransformation(mapNodeSRT);
    }

在 onProjectLoaded() 函数中创建 PanManipulator 操纵器并订阅 Map 节点的消息：

    virtual void onProjectLoaded() KZ_OVERRIDE
    {
        //域指针。
        Domain* domain = getDomain();

        //获取屏幕 (Screen) 节点。
        ScreenSharedPtr screen = getScreen();

        //使用节点的别名获取 Map 节点。
        Node2DSharedPtr mapNode = screen->lookupNode<Node2D>("#Map");

        //创建生成平移消息的输入操纵器。
        PanManipulatorSharedPtr panManipulator = PanManipulator::create(domain);

        //设置水平和垂直轴的阈值（以像素为单位），
        //在输入操纵器识别平移手势之前，指针需要移动轴。
        panManipulator->setRecognitionThreshold(Vector2(10.0f, 10.0f));

        //添加输入操纵器到 Map 节点。
        mapNode->addInputManipulator(panManipulator);

        //订阅 Map 节点的 PanManipulator::MovedMessage 消息。
        //当用户在水平或垂直轴上移动指针超过识别阈值并且指针在更新之间移动时，PanManipulator 
        //生成此消息。
        mapNode->addMessageHandler(PanManipulator::MovedMessage, bind(&PanZoomTap::onPanMoved, this, placeholders::_1));
    }

在 Visual Studio 中，为您的 Visual Studio 版本选择一个解决方案配置并运行应用程序。
例如，如果您仍在开发应用程序，选择GL_vs2015_Debug 配置。要创建 Kanzi 应用程序的产品版本，选择一个可用的发布配置。

在应用程序中点击并拖动地图，以进行平移。

< 简介

下一步 >

第 1 步 - 平移地图

教程资产

平移地图

另请参阅